<template>
  <div class="detail_div">
    <div @click="back" style="padding:10px">返回</div>
    <div class="detail_img">
      <img :src="detaiList.pimg" />
      <p>{{detaiList.pname}}</p>
      <p>{{detaiList.pprice}}</p>
    </div>
    {{ date | formatDate }}
    总价:{{ prices }}
    姓名:{{fullName}}
    <div v-if="type === 'name'">
      <label>用户名：</label>
      <input placeholder="输入用户名" key="name-input"/>
    </div>
    <div v-else>
      <label>邮箱：</label>
      <input placeholder="输入用邮箱" key="mail-input"/>
    </div>
    <button :class="classes" @click="btn">点击</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      detaiList: "",
      date: new Date(),
      package1: [
        {
          name: "iphone7",
          price: 8000,
          count: 2
        },
        {
          name: "iphone8",
          price: 8000,
          count: 1
        }
      ],
      firstName: '张三',
      lastName:'李四',
      size: 'active',
      disabled: true,
      type : 'name'
    };
  },
  created() {
    this.detailInfo();
  },
  filters: {
    formatDate: function(value) {
      var padDate = function(value){
        return value < 10 ? '0' + value : value
      };
      var date = new Date(value);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      month = month < 10 ? ('0' + month) : month;
      var day = padDate(date.getDay());
      var hours = padDate(date.getHours());
      var minutes = padDate(date.getMinutes());
      var seconds = padDate(date.getSeconds());
      return (year + "-" + month + "-" + day + hours + ":" + minutes + ":" + seconds)
    }
  },
  activated() {
    // 刷新数据
    if (!this.$route.meta.canKeep) {
      window.scrollTo(0, 1);
    }
    this.detailInfo();
  },
  // 计算属性
  computed: {
    prices() {
      var prices = 0;
      for (var i = 0; i < this.package1.length; i++) {
        prices += this.package1[i].price * this.package1[i].count;
      }
      return prices;
    },
    fullName:{
      get(){
        return this.firstName + ' ' + this.lastName;
      },
      set(newValue){
        var names = newValue.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1]
      }
    },
    classes(){
      return [
        {
          ['btn-' + this.size] : this.size !== '',
          ['btn-disabled'] : this.disabled
        }
      ]
    }
  },
  mounted() {
    var _this = this;
    this.times = setInterval(function(){
      _this.date = new Date()
    },1000)
  },
  beforeDestroy() {
    if(this.times){
      clearInterval(this.times)
    }
  },
  methods: {
    detailInfo() {
      this.$axios
        .get("http://jx.xuzhixiang.top/ap/api/detail.php", {
          params: {
            id: this.$route.query.id
          }
        })
        .then(obj => {
          console.log(obj);
          this.detaiList = obj.data.data;
        });
    },
    btn(){
      this.type = this.type === 'name' ? 'mail' : 'name'
      console.log(this.type)
    },
    back(){
      this.$router.go(-1)
    }
  }
};
</script>
<style scoped>
.detail_div {
  width: 95%;
  margin: 2.5%;
}
.detail_img {
  width: 100%;
}
.detail_img img {
  display: block;
  width: 100%;
  height: 100%;
}
</style>
